<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="../layui/css/layui.css" rel="stylesheet">
    <style>
        .userForm{
            margin-top: 50px;
        }
    </style>
</head>
<body>
<!--行工具栏模板-->
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="delete">删除</a>
    </div>
</script>
<!--头部工具栏模板-->
<script type="text/html" id="userBar">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-circle-fine"></i>   添加
        </a>
        <a class="layui-btn layui-btn-sm layui-bg-red" lay-event="batchDelete">
            <i class="layui-icon layui-icon-delete"></i>  批量删除
        </a>
    </div>
</script>


<!--搜索区域-->
<form class="layui-form userForm layui-row layui-col-space16">
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-username"></i>
            </div>
            <input type="text" name="A" value="" placeholder="Field A" class="layui-input" lay-affix="clear">
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <input type="text" name="B" placeholder="Field B" lay-affix="clear" class="layui-input">
        </div>
    </div>
    <div class="layui-col-md4">
        <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>

<table class="layui-hide" id="ID-table-demo-data" lay-filter="user-filter"></table>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../layui/layui.js"></script>
<script>
    layui.use(function(){
        // 获取表格对象
        let table = layui.table;
        // 已知数据渲染
        let inst = table.render({
            elem: '#ID-table-demo-data',
            // url 表格渲染时 会向后台发起异步请求  获取表格中需要渲染的数据   /user/list
            // 在向后台发起异步请求时 table组件会自动添加两个参数  ?page=1&limit=5    ->/user/list?page=1&limit=5
            url:"../static/user.json",
            toolbar: '#userBar',
            cols: [[ //标题栏
                {type: 'checkbox', fixed: 'left'},   // 设置复选框
                //field: 需要渲染后台数据的属性名  title  表格的字段名    width ： 设置表格的列宽  sort： 开启排序
                {field: 'id', title: 'ID'},
                {field: 'username', title: '用户'},
                {field: 'sign', title: '签名', minWidth: 160},
                {field: 'sex', title: '性别'},
                {field: 'city', title: '城市'},
                {field: 'experience', title: '积分'},
                {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
            ]],
            // data:[{},{}],    静态数据渲染
            skin: 'line', // 表格风格
            even: true,
            page: true, // 是否显示分页
            limits: [5, 10, 15,20,30,50],
            limit: 5 // 每页默认显示的数量
        });

        table.on('toolbar(user-filter)', function(obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            let infos = checkStatus.data  // [{},{}]
            //  箭头函数   lambda   ->
            let ids = infos.map(info=>info.id);   []

            var othis = lay(this);
            switch (obj.event) {
                case 'add':
                    layer.open({
                        title: '新增',
                        type: 2,
                        area: ['50%','60%'],
                        content: 'login.html'
                    });
                    //  发送异步请求 到后台完成用户信息添加
                    break;
                case 'batchDelete':
                    layer.msg("批量删除用户信息"+JSON.stringify(ids),{time:50000})
                    //  发送异步请求 到后台完成用户信息删除
                    break;
            }
            ;
        });

        // 触发单元格工具事件
        table.on('tool(user-filter)', function(obj){ // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if(obj.event === 'edit'){
                layer.open({
                    title: '编辑 - id:'+ data.id,
                    type: 1,
                    area: ['80%','80%'],
                    content: '<div style="padding: 16px;">自定义表单元素</div>'
                });
            } else if(obj.event === 'delete'){
                layer.msg("删除当前行数据"+data.id)
                //  发送异步请求 根据id 删除用户信息   data.id
            }

        });
        // 触发表格复选框选择
        table.on('checkbox(test)', function(obj){
            console.log(obj)
        });
    });
</script>

</body>
</html>
